﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>宿舍选择页面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="<%=basePath%>static/jquery-1.11.2.min.js" >
	
</script>
<script type="text/javascript" src="${basePath}/component/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="${basePath}/component/jBox/i18n/jquery.jBox-zh-CN.js"></script>

<link type="text/css" rel="stylesheet" href="${basePath}/component/jBox/Skins/Green/jbox.css"/>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: 0;
}

::-webkit-scrollbar {    
  width: 15px;    
  height: 18px;    
}    
::-webkit-scrollbar-track,    
::-webkit-scrollbar-thumb {    
  border-radius: 999px;    
  border: 5px solid transparent;    
}    
::-webkit-scrollbar-track {    
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;    
}    
    
::-webkit-scrollbar-thumb {    
  min-height: 20px;    
  background-clip: content-box;    
  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;    
}    
    
::-webkit-scrollbar-corner {    
  background: transparent;    
}
.clearfix::after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}

.clearfix {
	zoom: 1;
}
a {
	text-decoration: none;
}

#box{
	width:100%;
	height: 100px;

}
.title {
	position: fixed;
	top:0px;
	left:0px;
	height: 100px;
	font-size: 25px;
	font-family: "微软雅黑";
	line-height: 100px;
	text-align: center;
	width:100%;
	margin:0px auto;
}

li {
	list-style: none;
	float: left;
}

.qiehuan {
	position: absolute;
	top: 0px;
	right: 50px;
	font-size: 16px;
	text-align: center;
}

body {
	text-align:center;
}

.qiehuan select {
	width: 80px;
	border: 1px solid wheat;
	outline: none;
}

.body {
	white-space: nowrap;
	height: 500px;
}

/* #rooms div {
	position: relative;
	float:left;
} */

 #rooms {
	position: relative;
	/* //height:500px; */
} 

/*   设置查询按钮的样式    */
.but { 
	
	padding:0 5px;
	color: #000; 
	border: solid 1px #000; 
	border-radius:4px;
	/* background: silver; */ 
} 
.but:hover { 
	color: #000;
	border: solid 1px #000; 
	background: pink;  
} 
.sample_image{
	width: 50px;
	height: 30px;
	vertical-align:middle;
}
.title>span{
	position: fixed;
	left:200px;
	font-size: 18px;
	font-family: "微软雅黑";
	line-height: 100px;
	text-align: left;
	margin:0px auto;
}
.mess{
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: royalblue;
	border-radius: 10px;
	padding-left:5px;
	
}

</style>
</head>
<body>
<div id="box">
	<div class="message">
		
	</div>
	
	<div class="title">
		<span>
		可选:&nbsp;<img alt="图片加载中..." src="<%=basePath%>static/room/bed_show_03.png" class="sample_image">
		不可选:&nbsp;<img alt="图片加载中..." src="<%=basePath%>static/room/bed_show_02.png" class="sample_image">
		已选:&nbsp;<img alt="图片加载中..." src="<%=basePath%>static/room/bed_show_01.png" class="sample_image">
	</span>
		学校宿舍情况
		<div class="qiehuan">
			校区:
			<select id="sssq"  >
				<c:forEach items="${sssq}" var="sq" varStatus="status">
        			<option value="${sq.id }">${sq.sqm }</option>
        		</c:forEach>
			</select>
			&nbsp;&nbsp;楼号:
			<select id="ssl">
				<c:forEach items="${sslmc}" var="ssl" varStatus="status">
        			<option value="${ssl.id }">${ssl.sslmc }</option>
        		</c:forEach>
			</select>
			&nbsp;&nbsp;楼层:
			<select id="lc">
				<c:forEach items="${lc}" var="lc" varStatus="status">
        			<option value="${lc.lc }">${lc.lc }</option>
        		</c:forEach>
			</select>
			&nbsp;&nbsp;<input class="but" type="button" onclick="loadData()" value="查询">
		</div>
	</div>
	</div>
	<div class="body">
		<div id="prefixDiv"></div>
		<div id="rooms" class="clearfix" >
		
		</div>
	</div>
	<script type="text/javascript">
	jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
	
	var XSID = "${xs.id}";
	var SFKX = "${sfkx}";
	// $.extend(a, b)
	//  id 床位id  sssq  宿舍社区   sqm 社区名 ssl 宿舍楼  sslmc 宿舍楼名称   lc 楼层   ssfj 房间号   fjmc 房间名称  cwdm 床位代码    cwmc  床位名称    //yfpyxj 预分配优先级
	function Room (id,sssq,sqm,ssl,sslmc,lc,ssfj,fjmc,cwdm,cwmc,gxxs0101){
    		this.id=ssfj;
    		this.fjmc=fjmc;
    		this.sssq=sssq;
    		this.sqm=sqm;
    		this.ssl=ssl;
    		this.sslmc=sslmc;
    		this.lc=lc;
    		this.bed=[new Bed(id,cwdm ,cwmc,gxxs0101)]; 
    		//this.gxxs0101=gxxs0101;
    		//this.ssfj=ssfj;
    		//this.cwdm=cwdm;
    		//this.cwmc=cwmc;
    }
    function Bed (id ,cwdm ,cwmc,gxxs0101){ 
    	this.id =id;
    	this.cwdm=cwdm;
    	this.cwmc =cwmc;
    	this.gxxs0101=gxxs0101;
    }
    
    
    
    
    var roomMap=[];
    var roomList =[];
    function loadData(){
        var sssqid = $("#sssq").val();
        var sslid = $("#ssl").val();
        var lcid = $("#lc").val();
       /*  alert(XSID+"---"+sssqid+"---"+sslid+"---"+lcid); */
    	$.ajax({
			type: 'POST',
			url: "<%=basePath%>s/room/roomlist",
			dataType:'json',
			data:{"xsid":XSID,"sssqid":sssqid,"sslid":sslid,"lcid":lcid},
			error:function(){alert('数据加载失败，请联系管理员!')},
			success: function(obj){
				//遍历信息	
				init(obj);
			}
		});
    }
    function save(obj){
        var child = $(obj);
        var parent = child.parent();
        
        var sssqid = $("#sssq").val();
        var sqm = parent.attr("sqm");
        var sslid = $("#ssl").val();
        var sslmc = parent.attr('sslmc');
        var lcid = $("#lc").val();
        var fjid = parent.attr('fjId');
        var fjmc = parent.attr('fjmc');
        var cwid = child.attr("bedid");
        var cwmc = child.attr("cwmc");
        var gxxs0101 = child.attr("gxxs0101");
        
        /* alert(XSID+"---"+sssqid+"---"+sslid+"---"+lcid+"---"+cwid+"---"+gxxs0101); */
        if(cwid>0&&gxxs0101<0){
        	//判断是不是要选择
	        var submit = function (v, h, f) {
	            if (v == 'ok'){
	                //保存选宿舍操作
			        $.ajax({
						type: 'POST',
						url: "<%=basePath%>s/room/save",
						dataType:'json',
						data:{"xsid":XSID,"sssqid":sssqid,"sslid":sslid,"lcid":lcid,"fjid":fjid,"cwid":cwid},
						error:function(){$.jBox.info("数据加载失败，请联系管理员!", "提示");},
						success: function(data){
							if(data==1){
								/* 改变床的颜色  */
								changeBedState(cwid ,1);
								child.attr("gxxs0101",XSID);
								$.jBox.tip('选宿舍成功！', 'success', {width: 140, height: 40});
							}else if(data==0){
								$.jBox.info("保存选宿舍结果失败！", "提示");
							}else if(data==-1){
								$.jBox.info("您无权选择本床位！", "提示");
							}else if(data==-2){
								$.jBox.info("您已经选过床位，不可再次选择！", "提示");
							}else {
								$.jBox.info("选取宿舍出现异常，请联系管理员!", "提示");
							}
						}
					});
				}
				return true;
			};
			$.jBox.confirm("亲~确定选择"+sqm+"-"+sslmc+"-"+lcid+"楼"+"-"+cwmc+"床位吗？", "提示", submit);
        }else{
        	$.jBox.info("该床位不可选择！", "提示");
        }
    }
    function deleted(obj){
    	var child = $(obj);
        var parent = child.parent();
        
        var sssqid = $("#sssq").val();
        var sqm = parent.attr("sqm");
        var sslid = $("#ssl").val();
        var sslmc = parent.attr('sslmc');
        var lcid = $("#lc").val();
        var fjid = parent.attr('fjid');
        var fjmc = parent.attr('fjmc');
        var cwid = child.attr("bedid");
        var cwmc = child.attr("cwmc");
        var gxxs0101 = child.attr("gxxs0101");
        
        /* alert(XSID+"---"+gxxs0101+"---"+cwid); */
        if(cwid>0&&XSID!=gxxs0101){
        	$.jBox.info("您已经选过床位,请先退选！", "提示");
        }
        if(cwid<0&&XSID!=gxxs0101){
        	$.jBox.info("您没有权限操作该床位！", "提示");
        }
        if(XSID==gxxs0101){
        	//判断是不是要选择
	        var submit = function (v, h, f) {
	            if (v == 'ok'){
	                //保存选宿舍操作
			        $.ajax({
						type: 'POST',
						url: "<%=basePath%>s/room/delete",
						dataType:'json',
						data:{"xsid":XSID,"cwid":cwid},
						error:function(){$.jBox.info("数据加载失败，请联系管理员!", "提示");},
						success: function(data){
							if(data==1){
								/* 改变床的颜色  */
								changeBedState(cwid ,2);
								child.attr("gxxs0101","-1");
								$.jBox.tip('退选宿舍成功！', 'success', {width: 140, height: 40});
							}else if(data==0){
								$.jBox.info("退选宿舍失败！", "提示");
							}else if(data==-1){
								$.jBox.info("您已经退选过一次宿舍,不可再次退选！", "提示");
							}else {
								$.jBox.info("退选宿舍出现异常，请联系管理员!", "提示");
							}
						}
					});
				}
				return true;
			};
			$.jBox.confirm("亲~确定退选"+sqm+"-"+sslmc+"-"+lcid+"楼"+"-"+cwmc+"床位吗？", "提示", submit);
        }
    }
    function chooseOrDelete(obj){
    	if(SFKX==0){
    		save(obj);
    	}else{
    		deleted(obj);
    	}
    }
    var message1 = $("<div class=' mess' name='mess' >您可以选择该床位~~~</div>");
    var message2 = $("<div class=' mess' name='mess' >该床位属于友班,您无法选择~~~</div>");
    var message3 = $("<div class=' mess' name='mess' >该床位已经有人入住或者尚未开放~~~</div>");
    var root = $(".message");
    function over(obj,event){
    	var child = $(obj);
        var cwid = child.attr("bedid");
        var gxxs0101 = child.attr("gxxs0101");
        var e = event || window.event;             
	    var x = e.clientX;
	    var y = e.clientY;
        if(cwid<0){
        	root.append(message2); 
        }else if(gxxs0101>0){
        	root.append(message3);
        }else{
        	root.append(message1);
        }
		 $(".message").css({"color":"white","z-index":"100","position":"fixed","left":(x+30)+"px","top":(y+30)+"px"});
        if(x>1000)
		 $(".message").css({"z-index":"100","position":"fixed","left":(x-200)+"px","top":(y+30)+"px"});
    }
    function out(obj,event){
        root.empty();
    }
    
   var topBedlayoutMap=[];
    var botBedlayoutMap=[];
    var xBedGap=70;
    var yBedGap=5;
    var offsetX= 0;
	var offsetY= 30;
    function paintingBed(bedList , div ,coordinate ,xFirstGap,yFirstGap){  //coordinate 0在第一行   ，1在第二行
    	if(!bedList) return ;
    	for(var i=0 ;i<bedList.length;i++){
    		var bed = $("<div id='bed_"+bedList[i].id+"' gxxs0101='"+bedList[i].gxxs0101+"' coordinate='"+coordinate+"' bedId='"+bedList[i].id+"' cwmc='"+bedList[i].cwmc+"' cwdm='"+bedList[i].cwdm+"'  onclick='chooseOrDelete(this);' onmouseover='over(this,event);' onmouseout='out(this,event);'></div>")
	    		var loCss = {
		    			left:"", 
		    			top:""
		    		}
		    	var xsid = bedList[i].gxxs0101;
		    	var bedId = bedList[i].id;
    		if(coordinate==0){
	    		var lo = topBedlayoutMap[bedList[i].cwdm];
	    		
	    		if(lo.x==1){
		    		loCss.left=offsetX+xFirstGap+"px"
	    		}else{
	    			loCss.left=xBedGap*(lo.x-1)+(lo.x-1)*Bed.width+xFirstGap+offsetX+"px"
	    		}
	    		if(lo.y==1){ 
	    			loCss.top=yFirstGap+offsetY+"px"
	    		}else{
	    			loCss.top=yBedGap*(lo.y-1)+(lo.y-1)*Bed.height+yFirstGap+offsetY+"px"
	    		}
	    		if(bedId==-1){
		    		loCss.background= "url(<%=basePath%>static/room/bed_02.png) ";
		    	}else if(xsid==-1){
		    		loCss.background= "url(<%=basePath%>static/room/bed_03.png) ";
		    	}else if(xsid==XSID){
		    		loCss.background= "url(<%=basePath%>static/room/bed_01.png) ";
		    	}else{
		    		loCss.background= "url(<%=basePath%>static/room/bed_02.png) ";
		    	}
    			bed.css($.extend( {} ,Bed.css ,Bed.topCss ,loCss));
    		}else{
    			var lo = botBedlayoutMap[bedList[i].cwdm];
    			console.info(bedList[i].cwdm)
    			if(lo.x==1){
		    		loCss.left=offsetX+xFirstGap+"px"
	    		}else{
	    			loCss.left=xBedGap*(lo.x-1)+(lo.x-1)*Bed.width+xFirstGap+offsetX+"px"
	    		}
	    		if(lo.y==1){ 
	    			loCss.top=yFirstGap-offsetY+"px"  //下边是反方向 -offsetY
	    		}else{
	    			loCss.top=yBedGap*(lo.y-1)+(lo.y-1)*Bed.height+yFirstGap-offsetY+"px" //下边是反方向 -offsetY
	    		}
	    		if(bedId==-1){
		    		loCss.background= "url(<%=basePath%>static/room/bed_05.png) ";
		    	}else if(xsid==-1){
		    		loCss.background= "url(<%=basePath%>static/room/bed_06.png) ";
		    	}else if(xsid==XSID){
		    		loCss.background= "url(<%=basePath%>static/room/bed_04.png) ";
		    	}else{
		    		loCss.background= "url(<%=basePath%>static/room/bed_05.png) ";
		    	}
    			bed.css($.extend( {} ,Bed.css ,Bed.botCss ,loCss));
    		}
    		div.append(bed);
    	}
    
    }
    
    
    var roomlayoutMap=[];
    function painting(data){
     	var roomDiv = $("#rooms");
     	Room.lc.css.initWidth();
     	Room.fj.width=parseInt(Room.fj.css.width);
     	Room.fj.height=parseInt(Room.fj.css.height);
     	Bed.width=parseInt(Bed.css.width);
     	Bed.height=parseInt(Bed.css.height);
     	var xFirstGap = (Room.fj.width - (Bed.topLayout[0].length-1)*xBedGap - Bed.topLayout[0].length*Bed.width)/2;
	    var yFirstGap=(Room.fj.height - (Bed.topLayout.length-1)*yBedGap - Bed.topLayout.length*Bed.height)/2;
	    roomDiv.css(Room.lc.css)
    	for(var i =0 ; i < roomList.length ; i++){
    		var div = $("<div fjId='"+roomList[i].id+"' fjmc='"+roomList[i].fjmc+"' sslmc='"+roomList[i].sslmc+"'  sqm='"+roomList[i].sqm+"'  ></div>");
			var layout = roomlayoutMap[roomList[i].id];
			
			if(layout.position=="top"){
				var l = {
					"top":layout.y*Room.fj.height+"px",
					"left":layout.x*(Room.fj.width+Room.fj.xGap)+"px"
				}
				div.css($.extend( {} ,Room.fj.css , Room.fj.topCss,l));
			}else{
				var l = {
					"top":layout.y*Room.fj.height+Room.fj.yGap+"px",
					"left":layout.x*(Room.fj.width+Room.fj.xGap)+"px"
				}
				div.css($.extend( {} ,Room.fj.css , Room.fj.botCss,l));
		   }
			
			//最后一个不要右边框
			/* if(Room.fj.topLayout[Room.fj.topLayout.length-1]==roomList[i].id||Room.fj.botLayout[Room.fj.botLayout.length-1]==roomList[i].id)
				div.css({"border-right":""}) */
			
			
	    	paintingBed(roomList[i].bed , div,layout.position=="top"?0:1 ,xFirstGap,yFirstGap);
    		roomDiv.append(div);
    	}
    
    }
    
    function changeBedState(bedId ,state){    //1 自己选的    2 可选
    	var bed = $("#bed_"+bedId);
    	var coordinate = bed.attr("coordinate");
    	if(state==1){
    		if(coordinate==0)
    			bed.css({ 
    			"background": "url(<%=basePath%>static/room/bed_01.png)",
    	 		"background-size": "100% 100%"
    			});
    		else
    			bed.css({ "background": "url(<%=basePath%>static/room/bed_04.png) ",
    			"background-size": "100% 100%"});
    			SFKX=1;
    	}else if(state==2){
    		if(coordinate==0)
    			bed.css({ "background": "url(<%=basePath%>static/room/bed_03.png) ",
    			"background-size": "100% 100%"});
    		else
    			bed.css({ "background": "url(<%=basePath%>static/room/bed_06.png) ",
    			"background-size": "100% 100%"});
    			SFKX=0;
    	}
    }
    function init(data){
    	if(!data)return ;
    	$("#rooms div").remove();
    	roomList=[];
    	//解析转换数据 
    	for(var i =0 ; i<data.length ; i++){
    		var r=transform(data[i]);
    		if(r)
    			roomList.push(r);
    	}
    	$("#prefixDiv").css({"width":"200px","height":"500px","background":"url(<%=basePath%>static/room/prefixImg.jpg)", "background-size": "100% 100%","float":"left"})
    	Bed.css={
    		"width":"28px" , 
		    "height":"40px",
		    "position":"absolute",
		    "cursor":"pointer"
    	}; //床样式
    	Bed.topCss={
    	 "background": "url(<%=basePath%>static/room/bed_02.png)",
    	 "background-size": "100% 100%"
    	}
    	Bed.botCss={
    	 "background": "url(<%=basePath%>static/room/bed_05.png)",
    	 "background-size": "100% 100%"
    	}
    	Room.lc={};
	    Room.fj={};
    	Room.fj.css={
		    "width":"165px" , 
		    "height":"220px",
		    "position":"absolute"
	     };   //房间样式
	     
	     Room.fj.topCss={
	    	//"border-bottom":"5px solid transparent",
	     	//"border-right":"5px solid transparent",
	     	 "background": "url(<%=basePath%>static/room/timg.jpg) ",
		   
		    "background-size": "100% 100%"
	     	//"margin-bottom":"60px"
	     }
	     Room.fj.botCss={
	      "background": "url(<%=basePath%>static/room/timg2.jpg) ",
		   "background-size": "100% 100%"
	    	//"border-top":"5px solid transparent",
	     	//"border-right":"5px solid transparent"
	     }
	   /*  Room.fj.noLastCss={
	      	"border-right":"",
	    }  */
	    Room.lc.css={
	    	"width":"",
	    	"left":"200px",
	    	"initWidth":function (){    //根据内容动态调整宽度
	    	if(roomList.length<2)
	    		this.width=parseInt(Room.fj.css.width)+"px";
	    	else
	    	    this.width = roomList.length/2*parseInt(Room.fj.css.width)+"px";
	    	 },
	    	"height":"500px",
	    	"margin":"0px auto"
	    };  //楼层样式
	   
    	
    	//床位布局设置
    	 Bed.topLayout=[
    	
	    	[3,6],
	    	[2,5],
	    	[1,4]
    	]
	    Bed.botLayout=[
	    	[4,1],
	    	[5,2],
	    	[6,3]
	    ]
	    
	   /*  Bed.topLayout=[
    	
	    	[4,8],
	    	[3,7],
	    	[2,6],
	    	[1,5]
    	
    	]
	    Bed.botLayout=[
	    	[1,5],
	    	[2,6],
	    	[3,7],
	    	[4,8]
	    ] */
    	for(var i =0 ;i<Bed.topLayout.length;i++){
    		for(var j =0 ; j<Bed.topLayout[i].length ;j++){
    			topBedlayoutMap[Bed.topLayout[i][j]]={x:j+1,y:i+1}
    		}
    	}
    	for(var i =0 ;i<Bed.botLayout.length;i++){
    		for(var j =0 ; j<Bed.botLayout[i].length ;j++){
    			botBedlayoutMap[Bed.botLayout[i][j]]={x:j+1,y:i+1}
    		}
    	}
	   
	    Room.fj.topLayout=[];  //暂时没有用到  
	    Room.fj.botLayout=[];  //暂时没有用到  
	    Room.fj.yGap=60;  //纵轴位置上房间的间隔  需要加上border的宽度
	    Room.fj.xGap=0;   //横轴位置上房间之间的间隔  一般为border的宽度
	    
	    //房间布局设置
	    var index=0;
	    for(var i =0 ; i < roomList.length ; i++){
	    	if((i+1)%2!=0){
	    		Room.fj.topLayout.push(roomList[i].id); //暂时没有用到  
	    		roomlayoutMap[roomList[i].id]={x:index, y:0 ,position:"top"}
	    	}else{
	    		Room.fj.botLayout.push(roomList[i].id); //暂时没有用到  
	    		roomlayoutMap[roomList[i].id]={x:index, y:1 ,position:"bot"}
	    		index++;
	    	}
	    }
    	painting(data);
    }
    
    
   
    //数据格式转换函数
    function transform(obj){
    	var key  = obj.sssq+"_"+obj.ssl+"_"+obj.lc+"_"+obj.ssfj;
    	if(roomMap[key]){
    		roomMap[key].bed.push(new Bed (obj.id ,obj.cwdm ,obj.cwmc ,obj.gxxs0101))
    		return null;
    	}else{
    		var r =new Room(obj.id,obj.sssq,obj.sqm,obj.ssl,obj.sslmc,obj.lc,obj.ssfj ,obj.fjmc,obj.cwdm,obj.cwmc,obj.gxxs0101);
    		roomMap[key]=r;
    		return r;
    	}
    }
 
 	loadData(); 
 		
    </script>
</body>
</html>
